<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html {
      height: 100%;
    }

    body {
      height: 100%;
    }

    .top-nav {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }

    .top-nav-mid {
      display: flex;
      flex: 1;
      flex-direction: row;
      justify-content: center;
    }

    .top-nav-left {
      display: flex;
      flex: 1;
      flex-direction: row;
      justify-content: start;
    }

    .top-nav-right {
      display: flex;
      flex: 1;
      flex-direction: row;
      justify-content: end;
    }

    .pic {
      width: 75%;
      margin-top: 32px;
    }

    .left-back {
      width: 28px;
      height: 28px;
    }

    .right-to {
      width: 24px;
      height: 24px;
    }

    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .title {
      font-weight: 700;
      font-size: 18px;
    }

    .right {
      color: rgb(111, 231, 231);
    }

    .content-item {
      width: 90%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding-top: 18px;
      padding-bottom: 18px;
      border-top: 2px solid rgb(235, 241, 246);
    }

    .content-item-left {
      display: flex;
      flex: 1;
    }

    .icon {
      width: 50px;
      height: 50px;
      margin-right: 12px;
    }

    .content-mid-tips {
      display: flex;
      margin: 12px;
      margin-bottom: 36px;
      width: 100%;
      justify-content: center;
      flex-direction: row;
      gap: 3px;
    }
  </style>
</head>

<body>
  <div>
    <div class="top-nav">
      <div class="top-nav-left">
        <img class="left-back" src="./images/assets/arrow-left.png" alt="返回">
      </div>
      <div class="top-nav-mid">
        <span class="title">急速问诊</span>
      </div>
      <div class="top-nav-right">
        <span class="right">问诊记录</span>
      </div>
    </div>
    <div class="content">
      <img class="pic" src="./images/assets/consult-fast.png" alt="233">
      <div class="content-mid-tips">
        <span style="color: rgb(111, 231, 231);font-weight: 600;">20s</span>
        <span style="font-weight: 700;">快速匹配专业医生</span>
      </div>
      <div class="content-item">
        <div class="content-item-left">
          <img class="icon" src="./images/assets/doctor.png" alt="">
          <div>
            <div style="font-weight: 500; font-size: 18px;">三甲图文问诊</div>
            <div style="color: gainsboro; margin-top: 3px;">三甲主治及以上级别医生</div>
          </div>
        </div>
        <img class="right-to" src="./images/assets/arrow-right.png" alt="">
      </div>
      <div class="content-item">
        <div class="content-item-left">
          <img class="icon" src="./images/assets/message.png" alt="">
          <div>
            <div style="font-weight: 500; font-size: 18px;">普通图文问诊</div>
            <div style="color: gainsboro; margin-top: 3px;">二甲主治及以上级别医生</div>
          </div>
        </div>
        <img class="right-to" src="./images/assets/arrow-right.png" alt="">
      </div>
    </div>
  </div>
</body>

</html>